<template>
	<view class="unionsettlement-title">
		<view class="title">
			<image src="../../static/images/ruhuizhuanhui.png" mode="" class="img"></image>
			<view class="text">
				您的转会申请正由中电万维科技有限公司工会委员会审批中，预计5个工作日内完成，请耐心等待。
			</view>
		</view>
		<!-- 流程导览区域 -->
		<view class="process background-f borderradius steps">
			<view class="flex" style="margin-bottom: 15rpx;">
				<text class="flex1" style="font-weight: 700;">流程导览</text>
				<image src="../../static/images/liucheng.png" mode="" class="icon-img basic-img"></image>
			</view>
			<view class="linestyle">
				<image src="../../static/images/line.png" mode="" class="line1"></image>
				<image src="../../static/images/line1.png" mode="" class="line2"></image>
			</view>
			<!-- 遍历步骤 -->
			<view v-for="(step, index) in steps" :key="index" class="step" :class="step.className">
				<text class="circle"></text>
				<view class="step-title">{{ step.title }}</view>
				<view class="status" v-if="step.isActive" style="color: rgba(189, 26, 45, 1);">当前位置</view>
				<uni-icons style=" color:  #c8c8c8;" :type="step.isCompleted ? 'checkbox' : 'checkbox-outline'"
					size="24" :class="{ actived: step.isCompleted }"></uni-icons>
				<view class="line" v-if="index < steps.length - 1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 2,
				steps: [ // 流程步骤数据
					{
						title: '开始',
						isActive: false,
						isCompleted: false,
						className: '' // 用于动态类名
					},
				
					{
						title: '基层工会组建人员审批',
						isActive: false,
						isCompleted: false,
						className: ''
					},
					{
						title: '结束',
						isActive: false,
						isCompleted: false,
						className: ''
					}
				]
			}
		},
		onShow() {
			this.updateSteps()
		},
		methods: {
			// 更新步骤状态
			updateSteps() {
				// 获取当前步骤索引
				let currentStepIndex =  1 ;

				this.steps.forEach((step, index) => {
					if (index < currentStepIndex) {
						step.isCompleted = true; // 设置为已完成
						step.isActive = false;
					} else if (index === currentStepIndex) {
						step.isActive = true; // 设置为当前步骤
						step.isCompleted = false; // 当前步骤未完成
					} else {
						step.isCompleted = false; // 未完成
						step.isActive = false;
					}
					// 根据状态设置类名
					step.className = step.isActive ? 'active' : step.isCompleted ? 'completed' : 'unfinished';
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unionsettlement-title {
		.title {
			width: 686rpx;
			height: 376rpx;
			position: relative;
			margin: 162rpx auto 30rpx;
			border-radius: 10px;
			background: rgba(189, 26, 45, 1);

			.img {
				width: 172rpx;
				height: 172rpx;
				position: absolute;
				top: -43px;
				left: 50%;
				transform: translate(-50%);
			}

			.text {
				width: 536rpx;
				height: 82rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.linestyle {
		position: relative;
		padding: 16rpx 0;

		.line1 {
			width: 100%;
			height: 12rpx;
			position: absolute;
		}

		.line2 {
			width: 100%;
			height: 12rpx;
			position: absolute;
			left: 3%;
		}
	}

	.steps {
		display: flex;
		margin: 32rpx;
		flex-direction: column;
		padding: 32rpx;

		.step {
			display: flex;
			align-items: center;
			position: relative;

			.circle {
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
				background: rgba(229, 229, 229, 1); // 默认状态为灰色
			}

			.step-title {
				width: auto;
				height: 108rpx;
				line-height: 108rpx;
				margin-left: 16rpx;
				flex: 1;
			}

			.line {
				width: 1px;
				height: 80rpx;
				border-left: 4rpx dashed rgba(229, 229, 229, 1);
				transform: translateX(-2rpx);
				position: absolute;
				left: 10rpx;
				top: 66rpx;
			}

			// 当前步骤样式
			&.active {
				.circle {
					background: rgba(189, 26, 45, 1); // 红色
				}

				.step-title {
					color: rgba(189, 26, 45, 1); // 可选：标题颜色
				}
			}

			// 已完成步骤样式
			&.completed {
				.circle {
					background: rgba(200, 200, 200, 1); // 灰色
				}

				.step-title {
					color: rgba(200, 200, 200, 1); // 可选：标题颜色
				}
			}

			// 未完成步骤样式
			&.unfinished {
				.circle {
					background: rgba(0, 128, 0, 1); // 绿色
				}
			}
		}
	}
</style>